<template>
	<view class="transfer l-whitespace">
		<view class="transfer-tab">
			<van-tabs :active="active" @change="onTnternal">
				<van-tab title="LAB兑换LABtk">
					<view class="integral">
						<view class="itemRule">LAB兑换为LABtk 1:10</view>
						<view v-if="LABsum" class="itemsCount">
							兑换为：
							<text class="color1">{{ internal }}</text>
							个LABtk
						</view>
						<view class="integral-wrap">
							<van-cell-group class="integral-bg">
								<van-field
									clearable
									:value="LABsum"
									type="number"
									maxlength="10"
									input-class="integral-input"
									placeholder="请输入兑换数量"
									@change="onChange"
								/>
							</van-cell-group>
							<view class="integral-info">
								<text class="integral-info-txt">LAB余额 {{ walletInfo.seed }}</text>
								<text class="integral-info-btn" @tap="onAllTransfer(walletInfo.seed)">
									全部兑换
								</text>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="LABtk兑换LAB">
					<view class="integral">
						<view class="itemRule">LABtk兑换为LAB 10:1</view>
						<view v-if="LABsum" class="itemsCount">
							兑换为：
							<text class="color1">{{ internal }}</text>
							个LAB
						</view>
						<view class="integral-wrap">
							<van-cell-group class="integral-bg">
								<van-field
									clearable
									:value="LABsum"
									type="number"
									maxlength="10"
									input-class="integral-input"
									placeholder="请输入兑换数量"
									@change="onChange"
								/>
							</van-cell-group>
							<view class="integral-info">
								<text class="integral-info-txt">LABtk余额 {{ walletInfo.tk }}</text>
								<text class="integral-info-btn" @tap="onAllTransfer(walletInfo.tk)">
									全部兑换
								</text>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<view class="paly-btn">
			<van-button
				square
				type="primary"
				size="large"
				@tap="onSubmit"
				custom-class="paly-btn-bg"
			>
				确定兑换
			</van-button>
		</view>
		<dialog-pwd
			:dialogType="internalText"
			:dialogShow="dialogShow"
			@emitClose="emitClose"
		></dialog-pwd>
	</view>
</template>

<script>
import DialogPwd from '../../../components/dialog/pwd-dialog.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
	components: {
		DialogPwd
	},
	data() {
		return {
			LABsum: '',
			dialogShow: false,
			active: 0,
			ratio: 10,
			internalText: 'LAB兑换LABtk'
		};
	},
	onLoad() {
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			walletInfo: 'getWalletInfo'
		}),
		internal (val) {
			return parseFloat(this.LABsum * this.ratio).toFixed(2)
		}
	},
	methods: {
		...mapActions([
			'setWalletInfo'
		]),
		onSubmit() {
			if (this.LABsum < 1) {
				uni.showToast({
					title: '请输入兑换数量',
					icon: 'none'
				});
				return;
			}
			if (this.active) {
				if (this.LABsum > this.walletInfo.tk) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					return;
				}
			} else {
				if (this.LABsum > this.walletInfo.seed) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					return;
				}
			}
			this.dialogShow = true;
		},
		emitClose(e) {
			// 密码输入回调
			this.dialogShow = false
			if (e === 'off') return;
			this.exchangeLABtk()
		},
		exchangeLABtk (event) {
			this.$http.exchangeLABtk({
						addr: this.userInfo.addr,
						uid: this.userInfo.id,
						value: this.LABsum,
						type: this.active
					})
					.then(e => {
						if (e.data.msg.toLowerCase() === 'ok') {
							if (this.active) {
								this.walletInfo.seed += Number(this.internal)
								this.walletInfo.tk -= Number(this.LABsum)
							} else {
								this.walletInfo.seed -= Number(this.LABsum)
								this.walletInfo.tk += Number(this.internal)
							}
							
							this.setWalletInfo(this.walletInfo)
							this.dialogShow = false;
							uni.showToast({
								title: '兑换成功',
								icon: 'none'
							});
							return;
						}
						uni.showToast({
							title: e.data.msg,
							icon: 'none'
						});
						this.dialogShow = false;
					});

		},
		onAllTransfer(key) {
			this.LABsum = Number(key);
		},
		onTnternal (e) {
			this.LABsum = ''
			this.active = e.detail.index
			if(this.active){
				this.internalText = 'LABtk兑换LAB'
				this.ratio = 0.1
			} else {
				this.internalText = 'LAB兑换LABtk'
				this.ratio = 10
			}
			uni.setNavigationBarTitle({
				title: this.internalText
			});
		},
		onChange(e) {
			this.LABsum = Number(e.detail)
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../../common/trade.scss';
.itemRule {
	padding-left: 10upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	font-size: 20upx;
	line-height: 1.4;
	color: #7e7e7e;
}
.itemsCount {
	margin-bottom: 10upx;
	font-size: 22upx;
	.color1 {
		font-size: 28upx;
		font-size: 500;
	}
}
.dialog {
	&-title {
		padding: 20upx 0;
		font-size: 28upx;
		font-weight: 500;
		text-align: center;
	}
	&-sum {
		padding: 30upx;
		.sum {
			font-size: 28upx;
			color: #f4544d;
		}
	}
}
</style>
